<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>tabSlideOut jQuery plugin example page</title>
	
	<link href="css/example-page.css" rel="stylesheet" type="text/css" media="all" />
	
    <style type="text/css" media="screen">
    
    .slide-out-div {
       padding: 20px;
        width: 250px;
        background: #f2f2f2;
        border: #29216d 2px solid;
    }
    


	</style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.tabSlideOut.v1.3.js"></script>
         
         <script>
         $(function(){
             $('.slide-out-div').tabSlideOut({
                 tabHandle: '.handle',                              //class of the element that will be your tab
                 pathToTabImage: 'images/contact_tab.gif',          //path to the image for the tab *required*
                 imageHeight: '122px',                               //height of tab image *required*
                 imageWidth: '40px',                               //width of tab image *required*    
                 tabLocation: 'left',                               //side of screen where tab lives, top, right, bottom, or left
                 speed: 300,                                        //speed of animation
                 action: 'click',                                   //options: 'click' or 'hover', action to trigger animation
                 topPos: '200px',                                   //position from the top
                 fixedPosition: false,                               //options: true makes it stick(fixed position) on scroll
                 onLoadSlideOut: true
             });
         });

         </script>

</head>

<style type="text/css" media="screen">
/*    .handle {
        background: url(images/leftedge.png) no-repeat;
        height: 800px;
        width: 70px;
    }*/

</style>


<body>
    <div id="wrap" style="position:relative">
        <div id="header">
            <h1>Working example of the tabSlideOut jQuery plugin</h1>
                        <p><a href="http://www.building58.com/examples/tabSlideOut.zip">Download sample (.zip)</a></p>
                        <p><a href="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.2.js">Download the plugin</a></p>
                        <p><a href="http://wpaoli.building58.com/2009/09/jquery-tab-slide-out-plugin/">View blog post about this plugin</a></p>
        </div>        
        
        <div id="content">
            
            <p>See that little tab over there that says 'Contact'? If you click that it will slide out. This plugin allows you to easily add one of those to your page. </p>  The most important part of getting this plugin to work is to have your image path and image dimensions set correctly in the options.  In this version, using the code below, I am linking directly to google code for the jquery library as well as the plugin which I am hosting at code.google.com. This means you literally do not have to download anything to use this plugin. You can try it out by just copy/pasting the code on this page.</p>
            <h2>Getting started</h2>
            <p>In your &lt;head&gt; tag you need the javascript (with the options customized for your image):</p>
            <pre>
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.1.js"&gt;&lt;/script&gt; //path to the plugin file

    &lt;script&gt;
    $(function(){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',                     //class of the element that will become your tab
            pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab *required*
            imageHeight: '32px',                      //height of tab image *required*
            imageWidth: '167px',                      //width of tab image *required*    
            tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
            speed: 300,                               //speed of animation
            action: 'click',                          //options: 'click' or 'hover', action to trigger animation
            topPos: '200px',                          //position from the top/ use if tabLocation is left or right
            leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
            fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
        });

    });

    &lt;/script&gt;
                </pre>
                
                <p>Below that add your css:</p>
                
<pre>
      
      &lt;style&gt;
      
      .slide-out-div {
          padding: 20px;
          width: 250px;
          background: #ccc;
          border: #29216d 1px solid;
      }      
      &lt;/style&gt;
                        
</pre>

    <p>Anywhere in your page, (I put mine right above my &lt;/body&gt;) put in the html for your hidden content.</p>
    <pre>
        &lt;div class="slide-out-div"&gt;
            &lt;a class="handle" href="http://link-for-non-js-users.html"&gt;Content&lt;/a&gt;
            &lt;h3&gt;Contact me&lt;/h3&gt;
            &lt;p&gt;Thanks for checking out my jQuery plugin, I hope you find this useful.
            &lt;/p&gt;
            &lt;p&gt;This can be a form to submit feedback, or contact info&lt;/p&gt;
        &lt;/div&gt;
        
    </pre>
    
        </div>
        <div id="footer">

        </div>


    </div>

    <div class="slide-out-div">
        <a class="handle" href="http://link-for-non-js-users">Content</a>
        <h3>Contact me</h3>
        <a href="mailto:wpaoli@gmail.com">wpaoli@gmail.com</a><br /><br />
        <p>Thanks for checking out my jQuery plugin, I hope you find this useful.</p>
        <p>This can be a form to submit feedback, or contact info</p>
    </div>


</body>
</html>
